<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{$system_info['title']}</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template id="appcnt">
        <el-container style="height: 100%">
            <el-header class="summer-header" style="padding: 0">

                <el-row>
                    <el-col :span="18">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                style="height: 60px;overflow: hidden"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#1890ff"
                                text-color="#fff"
                                active-text-color="#f6f6f6">
                            <el-menu-item style="width: 200px; text-align: center">
                                <a class="logo-title"
                                   href="{:url('/thinkadmin/main/index')}">{$system_info['title']}</a> <i
                                    class="el-icon-s-operation" @click="isCollapse=!isCollapse"></i>
                            </el-menu-item>
                            <el-menu-item @click="changeSubMenu(index)" v-if="index < maxMenu" :key="index"
                                          v-for="(menu, index) in menus">
                                <i :class="menu.icon" v-if="menu.icon"></i>{{menu.title}}
                            </el-menu-item>
                            <el-submenu index="2" class="el-menu-top-right-dialog" v-if="menusMore.length">
                                <template slot="title">更多菜单</template>

                                <el-menu-item class="el-menu-top-right-item"
                                              @click="changeSubMenu(index + maxMenu)" :key="index"
                                              v-for="(menu, index) in menusMore">
                                    <i :class="menu.icon" v-if="menu.icon"></i>{{menu.title}}
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                    <el-col :span="6">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-top-right"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#1890ff"
                                text-color="#fff"
                                style="height: 60px;overflow: hidden"
                                active-text-color="#f6f6f6">
                            <el-submenu index="2" class="el-menu-top-right-dialog">
                                <template slot="title"><i class="el-icon-s-tools"></i>超级管理员</template>
                                <el-menu-item class="el-menu-top-right-item" index="2-1"
                                              @click="openUrl('{:url('/thinkadmin/my/index')}', '个人设置')">
                                    <i class="el-icon-user"></i> 个人设置
                                </el-menu-item>
                                <el-menu-item class="el-menu-top-right-item" index="2-3">
                                    <a href="{:url('/thinkadmin/auth/logout')}"><i class="el-icon-right"></i>退出登录</a>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item @click="openUrl('{:url('/thinkadmin/main/message')}', '消息')"><i class="el-icon-message-solid"></i>消息</el-menu-item>
                            <el-menu-item @click="openUrl('{:url('/thinkadmin/main/apps')}', '应用')"><i class="el-icon-apple"></i>应用</el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>

            </el-header>
            <el-container style="height: 100%">
                <el-aside :width="isCollapse ? '66px': '200px'" style="height: 100%">
                    <el-menu
                            style="height: 100%"
                            :collapse="isCollapse"
                            :unique-opened="true"
                            default-active="2"
                            class="el-menu-vertical-demo"
                    >
                        <template v-for="(menu, index) in subMenu">
                            <el-menu-item :index="`elMenu${index}`" v-if="!menu.child"
                                          @click="openUrl(menu.uri, menu.title)">
                                <i :class="menu.icon"></i>
                                <span slot="title">{{menu.title}}</span>
                            </el-menu-item>

                            <el-submenu :index="`elMenu${index}`" v-if="menu.child">
                                <template slot="title">
                                    <i :class="menu.icon"></i>
                                    <span>{{menu.title}}</span>
                                </template>

                                <template v-for="(child, childIndex) in menu.child">
                                    <el-menu-item :index="`elChildMenu${childIndex}`"
                                                  @click="openUrl(child.uri, child.title)"
                                                  v-if="!child.child">{{child.title}}
                                    </el-menu-item>
                                    <el-submenu :index="`elChildMenu${childIndex}`" v-if="child.child">
                                        <template slot="title">{{child.title}}</template>
                                        <el-menu-item :index="`elChildMenu${childSecIndex}`"
                                                      @click="openUrl(childSec.uri, childSec.title)"
                                                      v-for="(childSec, childSecIndex) in child.child" :key="index">
                                            {{childSec.title}}
                                        </el-menu-item>
                                    </el-submenu>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main class="summer-main">
                    <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
                        <el-tab-pane
                                :key="item.name"
                                v-for="(item, index) in editableTabs"
                                :name="item.name"
                                stlye="height:100%"
                        >
                            <span slot="label" v-html="item.title"></span>
                            <iframe :id="item.name" :src="item.url" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                isCollapse: false,
                activeIndex2: '1',

                maxMenu: 5,
                menus: [],
                menusMore: [],
                subMenus: [],
                subMenu: [],

                editableTabsValue: '0',
                editableTabs: [{
                    title: '<i class="el-icon-s-home"></i> 仪表盘 ',
                    name: '0',
                    url: '{$system_info["welcomeUrl"]}'
                }],
                tabIndex: 2
            }
        },
        methods: {
            openUrl(url, name) {
                let exist = -1
                this.editableTabs.map(function (item, index) {
                    if (item.url === url) {
                        exist = index
                    }
                })
                if(exist !== -1){
                    this.editableTabsValue = '' + exist;
                } else {
                    this.editableTabsValue = '' + this.editableTabs.length;
                    this.editableTabs.push({name: this.editableTabsValue, title: name, url: url})
                }
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleTabsEdit(targetName, action) {
                console.log(action)
                if (this.editableTabs.length < 1) {
                    return false;
                }
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            getMyMenus() {
                let _this = this
                $.getJSON("{:url('/thinkadmin/main/getMyMenus')}", function (rs) {
                    if (rs.code !== 200) {
                        return false;
                    }
                    rs.data.forEach((menus, index) => {
                        if (index >= 5) {
                            _this.menusMore.push(menus)
                        }
                        if (menus.child) {
                            _this.subMenus.push(menus.child)
                        } else {
                            _this.subMenus.push([])
                        }
                    })
                    _this.menus = rs.data
                    _this.changeSubMenu(0)
                })
            },
            changeSubMenu(index) {
                this.subMenu = this.subMenus[index]
            }
        },
        created: function () {
            let _this = this
            this.getMyMenus()
            window.addEventListener('message', function(event) {
                if(event.data.url){
                    _this.openUrl(event.data.url, event.data.blankName ? event.data.blankName : '新窗口')
                }
            }, false);
        }
    })
</script>
<style>
    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .summer-header i {
        color: #fff;
    }

    .el-menu-top-right-item a {
        text-decoration: none;
        color: #fff;
    }

    .el-menu-top-right-item i {
        color: #fff;
    }

    .summer-header .logo-title {
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }

    .el-menu-top-right > .el-menu-item{
        padding: 0 5px;
    }
    .el-menu-top-right > .el-menu-item, .el-menu-top-right > .el-submenu {
        float: right;
    }


    .el-tab-pane {
        height: 100%;
        width: 100%;
    }

    .summer-main {
        padding: 0;
    }

    .summer-main > .el-tabs, .summer-main > .el-tabs > .el-tabs__content {
        height: calc(100% - 30px);
    }

    .summer-main .el-tabs__header {
        margin: 0;
    }

    .el-tab-pane iframe {
        height: 100%;
        width: 100%;
    }

</style>
</html>